<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="vue.js"></script>
  <!-- <script src="vue@2.6.js"></script> -->
  <title>Document</title>
</head>

<body style="background-color: antiquewhite;">
  <div>
    <h3>watch</h3>
    <p style="white-space: pre; font-weight: 700;">
      就是把watch内的属性进行遍历创建n个watcher
      watcher的getter函数就是取watcher的监听的值（data或computed），此时这个值已经被代理了，取值就走到了这个值的get上
      而这个watcher没有lazy标识，已进入就会立刻进行getter，直接取值，并且把Dep.target设置为这个watcher，之后就进行依赖收集
      注意，这是在$mount之前进行的，所以还没有进行渲染，所以这个watcher是第一被dep收集的watcher，此后收集计算属性的，最后才是渲染watcher的
      这是特定的设置好的逻辑顺序：此后进行遍历的时候，最新进行的就是watch里的回调，然后是计算属性的取值缓存，此后才会重新渲染视图
    </p>
  </div>

  <div id="app">
    <div>fqmyysjjd</div>
    <div>{{ fqm }}</div>
    <div>{{ fqmyysjjd }}</div>
  </div>

  <script>
    let vm = new Vue({
      data() {
        return {
          fqm: "fqm",
          jj: {
            fqm: "fqm",
            yy: "yysjjd"
          }
        }
      },
      computed: {
        fqmyysjjd() {
          return this.fqm + this.jj.yy
        }
      },
      methods: {
        cb() {
          console.log("fqmyysjjd, cb1")
        }
      },
      watch: {
        jj() {
          return "fqmyysjjd, cb3"
        },
        fqm: [
          "cb",
          () => {
            console.log("fqmyysjjd, cb2")
          }
        ],
        fqmyysjjd: {
          handler() {
            console.log("fqmyysjjd, cb4")
          }
        },
        "jj.fqm": {
          handler() {
            console.log("fqmyysjjd")
          }
        }
      },
      el: "#app"
    })
  </script>
</body>

</html>